<template>
  <div v-if="visible" class="video-modal-overlay" @click.self="close">
    <div class="video-modal-container">
      <div class="video-modal-header">
        <h3>{{ title }}</h3>
        <button class="close-button" @click="close">&times;</button>
      </div>
      
      <div class="video-modal-content">
        <div v-if="videoUrl" class="video-wrapper">
          <video
            v-if="isVideoFile"
            :src="videoUrl"
            controls
            class="video-player"
          >
            您的浏览器不支持视频播放
          </video>
          
          <iframe
            v-else
            :src="embedUrl"
            frameborder="0"
            allowfullscreen
            class="video-iframe"
          ></iframe>
        </div>
        
        <div v-else class="no-video-message">
          <div class="no-video-icon">🎬</div>
          <p>暂无视频内容</p>
        </div>
      </div>
      
      <div class="video-modal-footer">
        <a v-if="videoUrl" :href="videoUrl" target="_blank" class="external-link">
          在新窗口中打开
        </a>
        <button @click="close" class="btn-close">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  videoUrl: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '视频预览'
  }
})

const emit = defineEmits(['update:visible', 'close'])

// 判断是否为视频文件（简单判断）
const isVideoFile = computed(() => {
  if (!props.videoUrl) return false
  const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.wmv']
  return videoExtensions.some(ext => props.videoUrl.toLowerCase().includes(ext))
})

// 生成嵌入URL（针对外部视频链接）
const embedUrl = computed(() => {
  if (!props.videoUrl) return ''
  
  // YouTube 链接处理
  if (props.videoUrl.includes('youtube.com') || props.videoUrl.includes('youtu.be')) {
    const videoId = props.videoUrl.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/)
    return videoId ? `https://www.youtube.com/embed/${videoId[1]}` : props.videoUrl
  }
  
  // 其他视频链接直接返回原URL
  return props.videoUrl
})

// 关闭模态框
const close = () => {
  emit('update:visible', false)
  emit('close')
}

// 监听ESC键关闭
const handleKeydown = (e) => {
  if (e.key === 'Escape') {
    close()
  }
}

// 添加和移除键盘事件监听器
watch(() => props.visible, (newVal) => {
  if (newVal) {
    document.addEventListener('keydown', handleKeydown)
    document.body.style.overflow = 'hidden'
  } else {
    document.removeEventListener('keydown', handleKeydown)
    document.body.style.overflow = ''
  }
})
</script>

<style scoped>
.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.video-modal-container {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: scaleIn 0.3s ease;
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.video-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.close-button:hover {
  background-color: #e5e7eb;
  color: #374151;
}

.video-modal-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background-color: #000;
}

.video-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-player {
  width: 100%;
  max-height: 70vh;
  outline: none;
}

.video-iframe {
  width: 100%;
  height: 70vh;
  border: none;
}

.no-video-message {
  text-align: center;
  color: #a0aec0;
  padding: 40px;
}

.no-video-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.no-video-message p {
  margin: 0;
  font-size: 16px;
}

.video-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.external-link {
  color: #3182ce;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.external-link:hover {
  color: #2c5282;
  text-decoration: underline;
}

.btn-close {
  background-color: #e53e3e;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-close:hover {
  background-color: #c53030;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.95); 
  }
  to { 
    opacity: 1;
    transform: scale(1); 
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .video-modal-overlay {
    padding: 10px;
  }
  
  .video-modal-container {
    max-height: 85vh;
  }
  
  .video-modal-header {
    padding: 12px 16px;
  }
  
  .video-modal-header h3 {
    font-size: 16px;
  }
  
  .video-modal-footer {
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
  }
  
  .external-link {
    margin-right: auto;
  }
  
  .video-iframe,
  .video-player {
    height: 50vh;
  }
}
</style>